<template>
	<view class="warp" style="background-color: #FFFFFF;">
		<view class="home_top1"></view>
		<view class="info box box-s1">
			<view class="tabbar">
				<tabBar @childFn="childFn" :tabTitle="tabTitle"></tabBar>
			</view>
			<!-- 验证码登录 -->
			<view class="item flex mt30">
				<view class="acea-row1 row-middle">
					<text class="iconfont cmain">&#xe6a3;</text>
					<input type="text" maxlength="11" placeholder="请输入您的手机号" v-model="account" required />
				</view>
			</view>
			<view class="item flex mt30">
				<view class="acea-row1 row-middle">
					<text class="iconfont cmain">&#xe613;</text>
					<input type="text" placeholder="请输入验证码" v-model="captcha" required />
				</view>
				<view class="code cmain" :disableds="disableds" @click="addlogin">
					{{yzmtext}}
				</view>

			</view>
			<view class="item flex mt30">
				<view class="acea-row1 row-middle">
					<text class="iconfont cmain">&#xe61d;</text>
					<input type="password" placeholder="请输入密码" v-model="password" required />
				</view>
			</view>
			<view class="item flex mt30">
				<view class="acea-row1 row-middle">
					<text class="iconfont cmain">&#xe61d;</text>
					<input type="password" placeholder="请确认密码" v-model="repassword" required />
				</view>
			</view>
			<view class="logon bmain" @click="submit">修&nbsp;&nbsp;改&nbsp;&nbsp;密&nbsp;&nbsp;码</view>
		</view>
	</view>
</template>

<script>
	import tabBar from '../../compontents/tab.vue'
	import {
		reset,
		verify_code,
		sendverify
	} from '../../api/api.js'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				tabTitle: [{
					name: "忘记密码"
				}],
				check: "",
				data1: "",
				disableds: true,
				yzmtext: '获取验证码',
				activename: "",
				account: "",
				password: "",
				repassword: "",
				captcha: "",
			}
		},
		onLoad() {
			this.getAPICode()
		},
		methods: {
			// 跳转页面
			getAPICode() {
				verify_code().then((res) => {
					console.log(res)
					this.keyApi = res.data.key
				})
			},
			addlogin() {
				console.log('发送验证码', this.disableds)
				if (this.disableds) {
					this.disableds = false
					this.addCodes()
				} else {
					return
				}
			},
			addCodes() {
				let that = this
				console.log('111111111')
				if (!that.account) {
					this.disableds = true
					uni.showToast({
						title: '请填写手机号!',
						icon: "none"
					})
					return
				}
				sendverify({
					phone: that.account,
					key: that.keyApi
				}).then((res) => {
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					let times = 60
					let timer = setInterval(() => {
						times--;
						that.yzmtext = times + "s"
						if (times <= 0) {
							that.disableds = true
							that.yzmtext = '重新获取'
							clearInterval(timer)
						}
					}, 1000)

				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				});
			},
			// 忘记密码登录
			submit() {
				if (!this.account || !this.password|| !this.repassword|| !this.captcha) {
					uni.showToast({
						title: "请完善信息再尝试!",
						icon: "none"
					})
					return
				}
				let data = {
					account: this.account,
					password: this.password,
					repassword: this.repassword,
					captcha: this.captcha
				}
				reset(data).then(res => {
					uni.showToast({
						title:res.msg,
					icon:"none"
					})
					if(res.status == 200){
						uni.navigateTo({
							url:'/pages/phone/login'
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.info {
		width: 90%;
		left: 50%;
		top: 60rpx;
		position: absolute;
		border-radius: 10rpx;
		transform: translateX(-50%);
		height: 950rpx;
		opacity: 1;
		background-color: #FFFFFF;

		// display: flex;
		// justify-content: center;
		// align-items: center;
		.tabbar {
			text-align: center;
			height: 110rpx;
			line-height: 110rpx;
			border-bottom: 1rpx solid #E0EDFF;
		}
	}

	.box {
		width: 600rpx;
		// height: 750rpx;
		border-radius: 20rpx;
		position: absolute;
		// top: 330rpx;
		left: 50%;
		transform: translate(-50%);
		background-color: #fff;

		.acea-row {
			margin-top: 150rpx;
			width: 550rpx;
			margin-left: 25rpx;
			padding: 20rpx;
			border-bottom: 2rpx solid #F5F5F5;

			image {
				margin-left: 50rpx;
				width: 50rpx;
				height: 50rpx;
			}

			input {
				margin-left: 40rpx;
			}
		}

		.acea-row1 {
			width: 550rpx;
			margin-left: 25rpx;
			padding: 20rpx;
			border-bottom: 2rpx solid #F5F5F5;

			image {
				margin-left: 50rpx;
				width: 50rpx;
				height: 50rpx;
			}

			input {
				display: inline-block;
				margin-left: 40rpx;
			}
		}

		.logo_Pwd {
			margin-left: 25rpx;
			margin-top: 25rpx;
			color: #ccc;
		}

		.logo_Speed {
			width: 200rpx;
			margin-top: 40rpx;
			margin-left: 450rpx;
			color: #ccc;
		}

		.logon {
			margin-top: 50rpx;
			border-radius: 80rpx;
			width: 550rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			font-size: 34rpx;
			// font-weight: bold;
			margin-left: 25rpx;
			// background-color: #ff7c32;
		}

		.ennoll {
			margin-top: 30rpx;
			border-radius: 80rpx;
			width: 550rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 25rpx;
			background-color: #ccc9cd;
		}
	}

	.code {
		width: 150rpx;
		font-size: 20rpx;
	}
</style>
